import { useDrag, useSize } from "ahooks";
import { useRef, useState } from "react";
import { Button } from "antd";
import { MoreOutlined, PlusCircleOutlined } from "@ant-design/icons";
interface PropsInt {
  text?: string;
  onPlus?: (text: string) => void;
}

const DragItem = ({
  text,
  onPlus,
}: {
  text: string;
  onPlus?: (text: string) => void;
}) => {
  return (
    <div
      className="h-[34px] flex items-center  text-[var(--text-100)]"
      style={{
        border: `1px solid #fff`,
      }}
    >
      <div className="flex px-2 gap-x-2">
        <PlusCircleOutlined
          color={"var(--text-100)"}
          onClick={() => {
            if (onPlus) onPlus(text);
          }}
        />
      </div>
      <div>{text}</div>
    </div>
  );
};

export default function LyricTextBox({ text, onPlus }: PropsInt) {
  const size = useSize(document.body);

  return (
    text && (
      <div
        className="fixed top-[60px] right-4 z-[88] overflow-y-auto pr-[14px]"
        style={{ height: (size?.height || 560) - 220 }}
      >
        <div className="flex flex-col gap-y-4">
          {text?.split("\n").map((item, index) => {
            return (
              <DragItem key={index} text={item} onPlus={onPlus}></DragItem>
            );
          })}
        </div>
      </div>
    )
  );
}
